<template>
    <div>
        <div class="body">
            <van-nav-bar title="个人中心" />
            <div class="hearder">
                <!-- 通过ref绑定操作dom avatat  -->
                <van-image round fit="cover" width="6rem" height="6rem" @click="updateAvatar" :src="avatar" />
                <input v-show="false" type="file" ref="avatar" @change="uploadAvatar" />
                <!-- <van-button @click="upload" size="mini" style="margin-top: 34px;">更换头像</van-button> -->
                <p style="line-height:56px">帳号:{{ $store.state.userInfo.username }}</p>
            </div>
            <div class="flex_c_c" style="display: flex;justify-content: center;align-items: center;">
                <div class="info">
                    <van-cell-group>
                        <van-cell title="我的订单" @click="$router.push('/myorder')" is-link />
                        <van-cell title="收货地址" @click="$router.push('/address')" is-link />
                        <van-cell title="设置" is-link />
                        <van-cell title="修改密码" is-link />
                        <van-cell title="关于Secret" value="v1.0.6" />
                        <van-button type="danger" block @click="goout">退出登录 </van-button>
                    </van-cell-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { upload } from '../api/user';
// import { mapMutations } from 'vuex'
export default {
    computed: {
        avatar() {
            return 'http://api.w0824.com/' + this.$store.state.userInfo.avatar;
        }
    },
    data() {
        return {

        }
    },
    methods: {
        // ...mapMutations[('clearInfo')],
        goout() {
            // 调用vuex清除token
            let _that = this;
            this.$dialog.confirm({
                title: '确认退出吗'
            })
                .then(() => {
                    _that.$store.commit('clearInfo')
                    _that.$router.replace('/home')
                })
                .catch(() => {

                })
        },
        async uploadAvatar() {
            let user_id = this.$store.state.userInfo.id;
            let file = this.$refs.avatar.files[0]
            if (file) {
                let formData = new FormData()
                formData.append('user_id', user_id)
                formData.append('file', file)
                // 更新用户头像
                let { message, status, src } = await upload(formData);
                console.log(src)
                this.$toast(message)
                if (status === 0) {
                    this.$store.commit('updateAvatar', src)
                }
            }
        },
        updateAvatar() {
            // 触发input上传文件的单击事件
            this.$refs.avatar.click();
        },
        // updateAvatar() {
        //     this.$dialog({
        //         message: "更换头像"
        //     })
        // },

    }
}
</script>

<style scoped>
.hearder {
    display: flex;
    justify-content: space-evenly;
    /* background-color: whitesmoke; */
    background: url('../assets/微信图片_20220523204124.jpg');
    height: 160px;
    padding-top: 4px;
}



.info {
    width: 90vw;
    padding: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: #fff;
    margin-top: -56px;
}

.van-cell__title {
    display: flex;
}
</style>